<template>
  <div class="repair_assess">
    <head-top head-title="评价" go-back="true"></head-top>
    <div class="assess_body">
      <div class="choice_opinion">
        <div class="star_rating">
          <span style="letter-spacing: 3px;">服务质量：</span>
          <lz-roating-bar :iScore.sync="score" />
          <!--{{score}}-->
        </div>
        <div class="star_rating">
          <span >结果满意度：</span>
          <lz-roating-bar :iScore.sync="score2" />
          <!--{{score2}}-->
        </div>
        <div class="flex">
          <ul class="heart">
            <li
              v-for="item in heartData"
              :key="item.value"
              @click="showD(item)"
              :class="{'active':item.show===true}"
            >{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="choice_opinion">
        <div class="fill_in">
          <textarea placeholder="请输入您对本次服务的宝贵意见，可以助力我们提升服务质量哦~" v-model="content"></textarea>
          <!--图片上传组件-->
          <IdentPublish @getImage="getImage" des-text="true"></IdentPublish>
        </div>
      </div>
      <div class="close_post">
        <div class="btn_array">
          <div class="btn_box wt" @click="closeBtn()"><span>取消</span></div>
          <div class="btn_box bl" @click="putAssess()"><span>提交评价</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import IdentPublish from '../common/IdentPublish'
  import LzRoatingBar from '../common/starScore'
  import {repairReviews} from '../../api/publishList'
  import {Toast} from 'mint-ui'

  export default {
    name: 'RepairAssess',
    data() {
      return {
        repairId: '', // 报修列表评价id
        score: 0, // 服务质量星星
        score2: 0, // 结果满意度星星
        content: '',
        heartData: [
          {
            value: 1,
            name: '质量优良',
            show: false
          },
          {
            value: 2,
            name: '态度很好',
            show: false
          },
          {
            value: 3,
            name: '效率很高',
            show: false
          },
          {
            value: 4,
            name: '反馈及时',
            show: false
          }
        ],
        selectCon: '', // 返回的当前选中数据
        serverIds: [] // 图片
      }
    },
    created() {
      // console.log(this.$route.params)
      this.repairId = this.$route.params.id
    },
    methods: {
      // 评价多选事件
      showD(item) {
        // 选中取消 取消选中
        item.show = !item.show
        // 当前选中的数据
        this.checkedData = this.heartData.filter(item => {
          return item.show == true
        })
        // 当前选中数据
        this.selectCon = ''
        for (var i = 0; i < this.checkedData.length; i++) {
          this.selectCon += this.checkedData[i].name + ','
        }
        console.log(this.selectCon)
        // console.log(this.checkedData);
      },
      // 图片上传
      getImage (image) {
        this.serverIds = image
      },
      // 取消
      closeBtn () {
        this.$router.back(-1)
      },
      // 提交评价
      putAssess() {
        if (this.score < 1 || this.score2 < 1) {
          Toast({
            message: '请评价本次服务！',
            position: 'middle',
            duration: 2000
          })
          return false
        }
        repairReviews(this.repairId, this.score, this.score2, this.content, this.selectCon, this.serverIds).then(res => {
          if (res.code === 200) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            this.$router.back(-1)
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            return false
          }
        })
      }
    },
    components: {
      headTop,
      IdentPublish,
      LzRoatingBar
    }
  }
</script>

<style lang="scss" scoped>
.repair_assess{
  padding: 40px 10px 10px 10px;
  background: #f2f2f2;
  .assess_body{
    position: relative;
    .choice_opinion{
      width: 100%;
      background: white;
      border-radius: 8px;
      padding-bottom: 10px;
      margin-top: 10px;
      .star_rating{
        display: inline-flex;
        align-items: center;
        padding: 20px 10px 10px 10px;
        span{
          font-size: 14px;
          color: #333333;
        }
      }
      .flex{
        background: #f2f2f2;
        margin: 10px;
        border-radius: 8px;
        padding: 10px;
        .heart{
          width: 100%;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          li {
            line-height: 16pt;
            border: 1px solid #ddd;
            padding: 5pt 8pt;
            border-radius: 20pt;
            text-align: center;
            font-size: 10pt;
            background: #ffffff;
          }
        }
        .active {
          background: #fff;
          border: 1px solid #EB7054 !important;
          color: #EB7054;
        }
      }
      .fill_in{
        padding: 10px;
        textarea{
          width: 98%;
          resize: none;
          border: none;
          outline: none;
          font-size: 14px;
          color: #333333;
          line-height: 25px;
          height: 100px;
        }
      }
    }
    .close_post{
      background: #ffffff;
      height: 60px;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 2;
      border-top: 1px solid #f2f2f2;
      width: 100%;
      .btn_array{
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .btn_box{
          width: 45%;
          height: 40px;
          margin: 10px;
          border-radius: 20px;
          text-align: center;
          line-height: 40px;
          span{
            font-size: 15px;
          }
        }
        .wt{
          background: #ffffff;
          span{
            color: #0C7AD9;
          }
        }
        .bl{
          background: #0C7AD9;
          span{
            color: white;

          }
        }
      }
    }
  }
}
</style>
